---
import type { CollectionEntry } from "astro:content";
import * as path from "node:path";
import { Icon } from "astro-icon/components";
import I18nKey from "@/i18n/i18nKey";
import { i18n } from "@/i18n/translation";
import { getDir, getTagUrl } from "@/utils/url-utils";
import ImageWrapper from "@/components/misc/ImageWrapper.astro";
import PostMetadata from "./PostMeta.astro";

interface Props {
  class?: string;
  entry: CollectionEntry<"posts">;
  title: string;
  url: string;
  published: Date;
  updated?: Date;
  tags: string[];
  category: string | null;
  image: string;
  description: string;
  draft: boolean;
  pinned?: boolean;
  style: string;
}
const {
  entry,
  title,
  url,
  published,
  updated,
  tags,
  category,
  image,
  description,
  pinned,
  style,
} = Astro.props;
const className = Astro.props.class;

const hasCover = image !== undefined && image !== null && image !== "";

const coverWidth = "28%";

const { remarkPluginFrontmatter } = await entry.render();
---

<div
  class:list={[
    "card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative",
    className,
  ]}
  style={style}
>
  <div
    class:list={[
      "pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative flex flex-col h-full",
      {
        "w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover,
        "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover,
      },
    ]}
  >
    <!-- pinned icon -->
    {
      pinned && (
        <div class="flex items-center gap-0.5 mb-2 md:absolute md:top-2 md:left-3 md:z-10 md:mb-0">
          <Icon
            name="material-symbols:pinboard"
            class="text-[var(--primary)] text-xl"
          />
          <span class="text-[var(--primary)] text-sm">
            {i18n(I18nKey.pinned)}
          </span>
        </div>
      )
    }

    <a
      href={url}
      class="transition group w-full block font-bold mb-3 text-3xl text-90
        hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
        active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
        before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
        before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block"
    >
      <!--       {
        pinned && (
          <>
            <Icon
              name="mdi:pin"
              class="inline text-[var(--primary)] text-2xl mr-2 -translate-y-0.5"
            />
          </>
        )
      } -->
      {title}
      <Icon
        class="inline text-[2rem] text-[var(--primary)] md:hidden translate-y-0.5 absolute"
        name="material-symbols:chevron-right-rounded"
      />
      <Icon
        class="text-[var(--primary)] text-[2rem] transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0"
        name="material-symbols:chevron-right-rounded"
      />
    </a>

    <!-- metadata -->
    <PostMetadata
      published={published}
      updated={updated}
      tags={tags}
      category={category || undefined}
      hideTagsForMobile={true}
      hideUpdateDate={true}
      words={remarkPluginFrontmatter.words}
      minutes={remarkPluginFrontmatter.minutes}
      showWordCount={true}
      className="mb-4 post-meta"
    />

    <!-- description -->
    <div
      class:list={[
        "transition text-75 mb-3.5 pr-4 description flex-grow",
        { "line-clamp-2 md:line-clamp-1": !description },
      ]}
    >
      {description || remarkPluginFrontmatter.excerpt}
    </div>

    <!-- tags -->
    <div
      class="text-sm text-black/30 dark:text-white/30 flex flex-wrap gap-2 transition stats mt-auto"
    >
      {
        tags &&
          tags.length > 0 &&
          tags.map((tag, i) => (
            <a
              href={getTagUrl(tag)}
              aria-label={`View all posts with the ${tag.trim()} tag`}
              class="btn-regular h-6 text-xs px-2 py-1 rounded-md border border-[var(--line-divider)]
                    transition-all duration-200 hover:scale-105 active:scale-95"
            >
              #{tag.trim()}
            </a>
          ))
      }
      {
        !(tags && tags.length > 0) && (
          <span class="text-[var(--content-meta)] text-xs">
            {i18n(I18nKey.noTags)}
          </span>
        )
      }
    </div>
  </div>

  {
    hasCover && (
      <a
        href={url}
        aria-label={title}
        class:list={[
          "group",
          "max-h-[20vh] md:max-h-none mx-4 mt-4 -mb-2 md:mb-0 md:mx-0 md:mt-0",
          "md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95",
        ]}
      >
        <div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition" />
        <div class="absolute pointer-events-none z-20 w-full h-full flex items-center justify-center ">
          <Icon
            name="material-symbols:chevron-right-rounded"
            class="transition opacity-0 group-hover:opacity-100 scale-50 group-hover:scale-100 text-white text-5xl"
          />
        </div>
        <ImageWrapper
          src={image}
          basePath={path.join("content/posts/", getDir(entry.id))}
          alt="Cover Image of the Post"
          class="w-full h-full"
        />
      </a>
    )
  }

  {
    !hasCover && (
      <a
        href={url}
        aria-label={title}
        class="!hidden md:!flex btn-regular w-[3.25rem]
         absolute right-3 top-3 bottom-3 rounded-xl bg-[var(--enter-btn-bg)]
         hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)] active:scale-95
        "
      >
        <Icon
          name="material-symbols:chevron-right-rounded"
          class="transition text-[var(--primary)] text-4xl mx-auto"
        />
      </a>
    )
  }
</div>

<style define:vars={{ coverWidth }}></style>
